<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分析生命周期</title>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root" :x="n">
      <h2 v-text="n"></h2>
      <h2>当前的n值是：{{n}}</h2>
      <button @click="add">点我n+1</button>
      <button @click="bye">点我销毁Vue实例</button>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#root",
      // 一个根元素
      /* template: `
        <div>
            <h2>当前的n值是：{{n}}</h2>
            <button @click="demo">点我n+1</button>
        </div>
      `, */
      data: {
        n: 1,
      },
      watch: {
        n() {
          console.log("n变了");
        },
      },
      methods: {
        add() {
          console.log("add");
          this.n++;
        },
        bye() {
          console.log("bye");
          this.$destroy();
        },
      },
      beforeCreate() {
        console.log("beforeCreate");
        // debugger
      },
      created() {
        console.log("created");
        // debugger
      },
      beforeMount() {
        console.log("beforeMount");
        // debugger
      },
      mounted() {
        console.log("mounted");
        // console.log(this.$el instanceof HTMLElement);// true
      },
      beforeUpdate() {
        console.log("beforeUpdate");
        console.log(this.n);
        // debugger
      },
      updated() {
        console.log("updated");
        console.log(this.n);
        // debugger
      },
      // 可以进行 关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
      beforeDestroy() {
        console.log("beforeDestroy");
        this.add(); // n加了，但是不触发视图更新了
      },
      destroyed() {
        console.log("destroyed");
      },
    });
  </script>
</html>
